<template>
	<view class="overall">
		<view class="box">
		<view class="message">
			<view class="picture">
				<image :src="logo"></image>
			</view>
			<view class="cname">
				{{cname}}
			</view>
			<view class="name">{{name}}</view>
			<view class="clap">
				<image :src="clapImage[this.clapImageNumber]" mode="" class="clap" @click="activeClap()"></image>
				
			</view>
			
			<view class="location">
				{{location}}
			</view>
		</view>
		<view class="image">
			<image :src="this.contentimages"></image>
		</view >
		<view class="Lable">
			<view class="lable">{{lableone}}</view>
			<view class="lable">{{labletwo}}</view>
			<view class="lable">{{lablethree}}</view>
		</view>
      </view>
	</view>
</template>

<script>
	export default {
		name:"xunda",
		data() {
			return {
				cname:'有没有饭搭子周末一起吃火锅',
				name:'hithit',
				location:'郑州市二七区',
				
				flag:true,
				clapImage:[
					'static/activityClap.png',
					'static/activeClap.png'
				],
				clapImageNumber:0,
				logo:[
					
				],
				contentimage:[
					

				],
				lableone:'饭搭子',
				labletwo:'郑州',
				lablethree:'重庆火锅'
				
			};
		}
	}
</script>

<style lang="scss">
	.overall{
		
		height: 500rpx;
		width: 100%;
		.box{
			
			margin-top: 105rpx;
			margin-left: 35rpx;
			height: 90%;
			width: 90%;
			border-radius: 20rpx;
			box-shadow: 10rpx 10rpx 10rpx 5rpx #e9e9e9;
		}
		.message{
			margin-left: 20rpx;
			height:30%;
			margin-top: 20rpx;
			.picture{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background-color: #b6f6fe;
				
			}
			.cname{
				font-weight: 600;
				font-size: 30rpx;
				margin-left: 180rpx;
				margin-top: -100rpx;
				
			}
			.name{
				margin-left: 180rpx;
				margin-top: 5rpx;
				font-weight: 600;
			}
			.clap{
				width: 60rpx;
				height: 60rpx;
				background-color: #e9e9e9;
				margin-left: 580rpx;
				margin-top: -70rpx;
			}
			.location{
				margin-left: 500rpx;
				font-size:25rpx;
				margin-top: 5rpx;
				
			}
			
		}
		.image{
			width: 70%;
			height: 280rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-image: linear-gradient(to right,#ffffff,#e8f6f9);
		}
		.Lable{
			margin-top: -290rpx;
		}
		.lable{
			width: auto;
			height: auto;
			text-align: center;
			margin-left: 500rpx;
			margin-top: 40rpx;
			background-color: #b2efed;
		}
		
	}

</style>